import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/exam/dto/assessment.response.dart';

import 'BGSinglePlayer.dart';

class BGExamTypeChoice extends StatelessWidget {
  final QuestionItem item;
  final bool isShowJudge;
  final Function getAnswer;

  const BGExamTypeChoice(
      {Key? key,
      required this.item,
      required this.getAnswer,
      required this.isShowJudge})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> options = [];
    List<Widget> rowOptions = [];
    List<QuestionContent> itemList = <QuestionContent>[];
    RxList<QuestionContent> selectList = <QuestionContent>[].obs;
    RxInt answerJudge = 0.obs; // 0 字数不足 // 1 正确 // 2 错误

    int answerBoxNum = 1;
    String solutionStr = '';
    if (item.solution != null && item.solution!.isNotEmpty) {
      solutionStr = item.solution![0];
      answerBoxNum = solutionStr.length;
    }
    options.add(
      Row(children: [
        SizedBox(width: 20),
        Expanded(child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 20),
              Visibility(
                  visible: item.head!.image != null && item.head!.image != '',
                  child: SizedBox(
                      width: MediaQuery.of(context).size.width * 0.6 > 400
                          ? 400
                          : MediaQuery.of(context).size.width * 0.6,
                      child: Image.network(item.head!.image ?? '',
                          fit: BoxFit.cover))),
              RichText(
                  text: TextSpan(
                      text: item.head?.text ?? '',
                      style: TextStyle(
                          fontFamily: 'Noto Sans SC',
                          fontSize: 30,
                          fontWeight: FontWeight.w600,
                          color: (Get.isDarkMode
                              ? Color(0xFF757575)
                              : Colors.black87),
                          height: 1.8),
                      children: [
                        WidgetSpan(
                            child: Visibility(
                                visible: item.head!.audio != null,
                                child: Container(
                                    padding: EdgeInsets.fromLTRB(6, 4, 6, 0),
                                    height: 40,
                                    width: 52,
                                    child: IconButton(
                                      iconSize: 40,
                                      padding: EdgeInsets.zero,
                                      icon: Icon(
                                        Icons.volume_up,
                                        color: Colors.orange,
                                      ),
                                      onPressed: () {
                                        BGSinglePlayer()
                                            .play(item.head!.audio);
                                      },
                                    ))))
                      ]))
            ]))
      ]),
    );
    options.add(SizedBox(height: 20));
    rowOptions.add(Text('Your Answer:',
        style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.w900,
            color: (Get.isDarkMode ? Color(0xFF757575) : Color(0xff5C6274)))));
    rowOptions.add(SizedBox(width: 30));
    for (int i = 0; i < answerBoxNum; i++) {
      selectList.add(QuestionContent(text: '', baseValue: ''));
      rowOptions.add(DragTarget<QuestionContent>(builder: (BuildContext context,
          List<dynamic> accepted, List<dynamic> rejected) {
        return Container(
            width: 80,
            height: 80,
            alignment: Alignment.center,
            child:
                Text(selectList[i].text ?? '', style: TextStyle(fontSize: 24)),
            decoration: BoxDecoration(
                border: Border.all(
                  color: Color(0xFFFF6100),
                  width: 2,
                ),
                borderRadius: BorderRadius.circular(12)));
      }, onWillAccept: (QuestionContent? body) {
        return true;
      }, onAccept: (QuestionContent body) {
        selectList[i] = body;
        List<String> answer = [];
        for (var o in selectList) {
          answer.add(o.baseValue.toString());
        }
        String answerStr = '';
        for (String o in answer) {
          answerStr += o;
        }
        getAnswer(answerStr);
        if (answerStr.length != answerBoxNum) {
          answerJudge.value = 0;
        } else {
          if (answerStr == solutionStr) {
            answerJudge.value = 1;
          } else {
            answerJudge.value = 2;
          }
        }
      }));
      rowOptions.add(SizedBox(width: 15));
    }

    rowOptions.add(Obx(() {
      return Visibility(
          visible: isShowJudge &&
              solutionStr.isNotEmpty &&
              answerJudge.value > 0,
          child: SizedBox(
            width: 60,
            child: Icon(answerJudge.value == 1 ? Icons.check : Icons.close,
                color: answerJudge.value == 1 ? Colors.green : Colors.red,
                size: 60),
          ));
    }));

    if (item.body != null) {
      itemList = item.body!.first;
      options.add(Row(children: [
        SizedBox(width: 20),
        Expanded(child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                children: rowOptions,
              ),
              SizedBox(height: 20),
              Wrap(runSpacing: 15, spacing: 15, children: [
                for (int i = 0; i < itemList.length; i++)
                  _buildChoiceItem(itemList[i])
              ]),
              SizedBox(height: 50)
            ]))
      ]));
    }

    return Container(
      height: MediaQuery.of(context).size.height - 200,
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: options),
    );
  }

  Widget _buildChoiceItem(QuestionContent body) {
    Widget option = Container(
        padding: EdgeInsets.all(15),
        child: Text(body.text ?? '', style: TextStyle(fontSize: 20)),
        decoration: BoxDecoration(
            border: Border.all(
              color: Color(0xffeeeeee),
              width: 2,
            ),
            borderRadius: BorderRadius.circular(12)));

    return DragTarget<QuestionContent>(builder:
        (BuildContext context, List<dynamic> accepted, List<dynamic> rejected) {
      return Container(
          child: Draggable<QuestionContent>(
        onDragCompleted: () {},
        data: body,
        child: option,
        feedback: option,
        childWhenDragging: option,
      ));
    });
  }
}
